import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_wifi/page/WebBasePage.dart';
import 'package:flutter_wifi/const/ImgConst.dart';
import 'package:flutter_wifi/const/MyColor.dart';
import 'package:flutter_wifi/language/LanguageValue.dart';
import 'package:flutter_wifi/upload/MusicUploadTask.dart';
import 'package:mybase/base/animate_do/FFAnimate.dart';
import 'package:mybase/base/tool/FFMath/FFMath.dart';
import 'package:mybase/base/tool/extension/FFListExt.dart';
import 'package:mybase/base/tool/globalMethod/FFScreenValue.dart';
import 'package:mybase/base/widget/layout/FFContainer.dart';
import 'package:mybase/base/widget/layout/FFImageButton.dart';
import 'package:mybase/base/widget/layout/FFLineContainer.dart';
import 'package:mybase/base/widget/layout/FFList.dart';
import 'package:mybase/base/widget/layout/FFTextButton.dart';
import 'package:mybase/base/widget/progress/FFProgressItem.dart';

class WebUploadView extends StatefulWidget {
  WebBasePageGetx getx;

  WebUploadView({
    super.key,
    required this.getx,
  });

  @override
  State<WebUploadView> createState() => _WebUploadViewState();
}

class _WebUploadViewState extends State<WebUploadView> {
  late AnimationController controller;

  @override
  Widget build(BuildContext context) {
    return FFAnimate(
      begin: 0,
      end: 1,
      duration: const Duration(milliseconds: 250),
      controller: (ctl) => controller = ctl,
      manualTrigger: true,
      builder: (BuildContext context,
          AnimationController controller,
          Widget? child,
          double progress,) {
        return view(progress, controller);
      },
    );
  }

  Widget view(double progress, AnimationController controller) {
    return FFLineContainer(
      direction: Axis.vertical,
      width: min(400, globalScreenWidth(context) * 0.5),
      decoration: BoxDecoration(
        color: MyColor.c1F1F1F,
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(4),
          topRight: Radius.circular(4),
        ),
      ),
      children: [
        // 顶部
        FFLineContainer(
          direction: Axis.horizontal,
          crossAxisAlignment: CrossAxisAlignment.center,
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 15),
          decoration: BoxDecoration(
            color: MyColor.c333333,
          ),
          children: [
            widget.getx.build((x) =>
                FFTextButton(
                  isExpand: true,
                  text: "${widget.getx.deviceEntity.value.fileUpload} ${x.completeCount.value}/${x.uploadList.toLength}",
                  fontSize: 14,
                  fontColor: MyColor.ffffff,
                  maxLines: 10,
                )),
            Transform(
              alignment: Alignment.center,
              transform: Matrix4.rotationZ(FFMath.deg2rad(progress * 180)),
              child: FFImageButton(
                width: 18,
                heigth: 18,
                image: AssetImage("assets/common/system_down@3x.png"),
              ),
            ),
          ],
          onClick: () {
            if (controller.isCompleted) {
              controller.reverse();
            } else {
              controller.forward();
            }
          },
        ),

        // 列表
        widget.getx.build((x) =>
            FFContainer(
              heigth: globalScreenHeight(context) * 0.5 * progress,
              child: FFList(
                space: 0,
                builder: (ctx, index) {
                  MusicUploadTask entity = x.uploadList.value[index];
                  return FFLineContainer(
                    direction: Axis.vertical,
                    padding: EdgeInsets.symmetric(vertical: 12),
                    children: [
                      FFLineContainer(
                        direction: Axis.horizontal,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        margin: EdgeInsets.only(bottom: 12),
                        padding: EdgeInsets.symmetric(horizontal: 16),
                        children: [
                          // icon
                          FFImageButton(
                            width: 20,
                            heigth: 20,
                            image: AssetImage(ImgConst.imgLocal),
                          ),

                          // 文件名
                          FFTextButton(
                            isExpand: true,
                            text: entity.name,
                            fontSize: 14,
                            fontColor: MyColor.ffffff,
                            textVerticalCenter: true,
                            margin: EdgeInsets.only(left: 10),
                          ),

                          // FFTextButton(
                          //   text: LanguageValue.formatnot(controller),
                          //   fontSize: 10,
                          //   fontColor: MyColor.ff5b4d,
                          // ),
                        ],
                      ),
                      // 进度条
                      FFProgressItem(
                        padding: EdgeInsets.symmetric(horizontal: 16),
                        id: entity.name ?? "",
                        backgroundColor: MyColor.c666666,
                        progressColor: MyColor.c5C77FF,
                        lineHeight: 2,
                        finishWidget: Container(
                          height: 2,
                          alignment: Alignment.topCenter,
                          child: Container(
                            height: 1,
                            color: MyColor.c333333,
                          ),
                        ),
                      ),
                    ],
                  );
                },
                itemCount: widget.getx.uploadList.toLength,
              ),
            )),
      ],
    );
  }
}
